import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Button, Popup } from "react-vant";
import logo from '../../logo.svg'
const Index: React.FC = () => {
  // 初次进入
  const flag = (localStorage.getItem('flag') || '2') === '2' ?  true : false
  const price = 1000
  const [visible, setVisible] = useState(flag);
  const navigate = useNavigate()
  useEffect(() => {
    localStorage.setItem("flag", '1')
  }, [])

  return (
    <div>
      <NavBar title="花呗" />
      <div className="middle">
        <div>12月份应还</div>
        <div>{ price }元</div>
        <Button type="primary" onClick={() => navigate('/antPayDetail')}>立即还款</Button>
      </div>

      <Popup visible={visible} onClose={() => setVisible(false)} closeable>
        <div className="popup-content">
          <img src={logo} alt="" width={100}/>
          <img src={logo} alt="" width={100}/>
          <img src={logo} alt="" width={100}/>
        </div>
      </Popup>
    </div>
  );
};

export default Index;
